<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./resources/jquery.3.6.0.min.js"></script>
    <script src="./resources/template-web.js"></script>
    <title>书评网</title>
    <style>
        .category {
            font-weight: bold;
        }
    </style>
    <script>
        $(function () {
            $.ajax({
                url: "/books",
                data: {"page": 1},
                type: "GET",
                dataType: "json",
                success: function (data) {
                    console.log(data)
                    var list = data.records;
                    for (var i = 0; i < list.length; i++) {
                        var book = list[i];
                        // var html = "<li>" + book.bookName + "</li>";
                        var html = template("bookTpl", book);
                        console.info(html)
                        $("#bookList").append(html)
                    }
                }
            })
        })
    </script>
    <#-- 定义JavaScript模板 -->
    <script type="text/html" id="bookTpl">
        <div href="/book/{{bookId}}">
            书名：{{bookName}}
            作者：{{author}}
            封面：{{subTitle}}
            描述：{{description}}
            评分：{{evaluationScore}}
        </div>
    </script>
</head>
<body>
<span class="category">全部</span>
|
<#list categoryList as category>
    <span class="category" id="${category.categoryId}">${category.categoryName}</span>
    <#if category_has_next>
        |
    </#if>
</#list>
<div id="bookList"></div>
</body>
</html>